﻿{ZL.Source id="图库模型数据源标签"/}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>{SField sid="图库模型数据源标签" FD="Title" page="0"/}_{$SiteName/}</title>
<meta name="Keywords" content="{SField sid="图库模型数据源标签" FD="Tagkey" page="0"/}">
{ZL:Boot()/}
<link href="{$CssDir/}global.css?Version={ZL.Label id="前端样式版本号"/}" rel="stylesheet"/>
<script src="/js/scrolltopcontrol.js" type="text/javascript"></script>
<script src="/JS/Controls/B_User.js"></script>
<script src="{$CssDir/}js/server.js"></script>
<style>
body{overflow:hidden;margin:0;padding:0;background-color:#fcfcfc}
.magazine-viewport .container{position:absolute;top:50%;left:50%;margin:auto;width:922px;height:600px}
.magazine-viewport .magazine{top:-300px;left:-461px;width:922px;height:600px}
.magazine-viewport .page{width:461px;height:600px;background-color:#fff;background-size:100% 100%;background-repeat:no-repeat}
.magazine-viewport .zoomer .region{display:none}
.magazine .region{position:absolute;overflow:hidden;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;background:#06F;opacity:.2;cursor:pointer;-ms-border-radius:10px;-o-border-radius:10px;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";filter:alpha(opacity=20)}
.magazine .region:hover{opacity:.5;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";filter:alpha(opacity=50)}
.magazine .region.zoom{opacity:.01;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";filter:alpha(opacity=1)}
.magazine .region.zoom:hover{opacity:.2;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";filter:alpha(opacity=20)}
.magazine .page{-webkit-box-shadow:0 0 20px rgba(0,0,0,.2);-moz-box-shadow:0 0 20px rgba(0,0,0,.2);box-shadow:0 0 20px rgba(0,0,0,.2);-ms-box-shadow:0 0 20px rgba(0,0,0,.2);-o-box-shadow:0 0 20px rgba(0,0,0,.2)}
.magazine-viewport .page img{margin:0;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.magazine .even .gradient{position:absolute;top:0;left:0;width:100%;height:100%;background:-webkit-gradient(linear,left top,right top,color-stop(.95,rgba(0,0,0,0)),color-stop(1,rgba(0,0,0,.2)));background-image:-webkit-linear-gradient(left,rgba(0,0,0,0) 95%,rgba(0,0,0,.2) 100%);background-image:-moz-linear-gradient(left,rgba(0,0,0,0) 95%,rgba(0,0,0,.2) 100%);background-image:-ms-linear-gradient(left,rgba(0,0,0,0) 95%,rgba(0,0,0,.2) 100%);background-image:-o-linear-gradient(left,rgba(0,0,0,0) 95%,rgba(0,0,0,.2) 100%);background-image:linear-gradient(left,rgba(0,0,0,0) 95%,rgba(0,0,0,.2) 100%)}
.magazine .odd .gradient{position:absolute;top:0;left:0;width:100%;height:100%;background:-webkit-gradient(linear,right top,left top,color-stop(.95,rgba(0,0,0,0)),color-stop(1,rgba(0,0,0,.15)));background-image:-webkit-linear-gradient(right,rgba(0,0,0,0) 95%,rgba(0,0,0,.15) 100%);background-image:-moz-linear-gradient(right,rgba(0,0,0,0) 95%,rgba(0,0,0,.15) 100%);background-image:-ms-linear-gradient(right,rgba(0,0,0,0) 95%,rgba(0,0,0,.15) 100%);background-image:-o-linear-gradient(right,rgba(0,0,0,0) 95%,rgba(0,0,0,.15) 100%);background-image:linear-gradient(right,rgba(0,0,0,0) 95%,rgba(0,0,0,.15) 100%)}
.magazine-viewport .zoom-in .even .gradient,.magazine-viewport .zoom-in .odd .gradient{display:none}
.magazine-viewport .loader{position:absolute;top:280px;left:219px;width:22px;height:22px;background-image:url({$CssDir/}images/loader.gif)}
.magazine-viewport .shadow{-webkit-box-shadow:0 0 20px #ccc;-moz-box-shadow:0 0 20px #ccc;box-shadow:0 0 20px #ccc;-webkit-transition:-webkit-box-shadow .5s;-moz-transition:-moz-box-shadow .5s;-o-transition:-webkit-box-shadow .5s;-ms-transition:-ms-box-shadow .5s;-o-box-shadow:0 0 20px #ccc;-ms-box-shadow:0 0 20px #ccc}
.magazine-viewport .next-button,.magazine-viewport .previous-button{position:absolute;top:0;width:22px;height:600px}
.magazine-viewport .next-button{right:-22px;-webkit-border-radius:0 15px 15px 0;-moz-border-radius:0 15px 15px 0;border-radius:0 15px 15px 0;-ms-border-radius:0 15px 15px 0;-o-border-radius:0 15px 15px 0}
.magazine-viewport .previous-button{left:-22px;-webkit-border-radius:15px 0 0 15px;-moz-border-radius:15px 0 0 15px;border-radius:15px 0 0 15px;-ms-border-radius:15px 0 0 15px;-o-border-radius:15px 0 0 15px}
.magazine-viewport .next-button-hover,.magazine-viewport .previous-button-hover{background-color:rgba(0,0,0,.2)}
.magazine-viewport .previous-button-down,.magazine-viewport .previous-button-hover{background-image:url({$CssDir/}images/arrows.png);background-position:-4px 284px;background-repeat:no-repeat}
.magazine-viewport .next-button-down,.magazine-viewport .previous-button-down{background-color:rgba(0,0,0,.4)}
.magazine-viewport .next-button-down,.magazine-viewport .next-button-hover{background-image:url({$CssDir/}images/arrows.png);background-position:-38px 284px;background-repeat:no-repeat}
.magazine-viewport .zoom-in .next-button,.magazine-viewport .zoom-in .previous-button{display:none}
.animated{-webkit-transition:margin-left .5s;-moz-transition:margin-left .5s;-o-transition:margin-left .5s;transition:margin-left .5s;-ms-transition:margin-left .5s}
.thumbnails{position:absolute;bottom:0;left:0;z-index:1;width:100%;height:140px}
.thumbnails>div{margin:20px auto;width:1050px;height:100px}
.thumbnails ul{margin:0;padding:0;text-align:center;-webkit-transition:-webkit-transform ease-in-out .1s;-moz-transition:-moz-transform ease-in-out .1s;-o-transition:-o-transform ease-in-out .1s;transition:transform ease-in-out .1s;-webkit-transform:scale3d(.5,.5,1);-moz-transform:scale3d(.5,.5,1);-o-transform:scale3d(.5,.5,1);transform:scale3d(.5,.5,1);-ms-transform:scale3d(.5,.5,1);-ms-transition:-ms-transform ease-in-out .1s}
.thumbanils-touch ul{-webkit-transform:none;-moz-transform:none;-o-transform:none;transform:none;-ms-transform:none}
.thumbnails-hover ul{-webkit-transform:scale3d(.6,.6,1);-moz-transform:scale3d(.6,.6,1);-o-transform:scale3d(.6,.6,1);transform:scale3d(.6,.6,1);-ms-transform:scale3d(.6,.6,1)}
.thumbnails li{display:inline-block;margin:0 5px;-webkit-box-shadow:0 0 10px #ccc;-moz-box-shadow:0 0 10px #ccc;box-shadow:0 0 10px #ccc;list-style:none;-webkit-transition:-webkit-transform 60ms;-moz-transition:-webkit-transform 60ms;-o-transition:-webkit-transform 60ms;transition:-webkit-transform 60ms;-ms-box-shadow:0 0 10px #ccc;-o-box-shadow:0 0 10px #ccc;-ms-transition:-webkit-transform 60ms}
.thumbnails li span{display:none}
.thumbnails .current{-webkit-box-shadow:0 0 10px red;-moz-box-shadow:0 0 10px red;box-shadow:0 0 10px red;-ms-box-shadow:0 0 10px red;-o-box-shadow:0 0 10px red}
.thumbnails .thumb-hover{-webkit-box-shadow:0 0 10px #666;-moz-box-shadow:0 0 10px #666;box-shadow:0 0 10px #666;-webkit-transform:scale3d(1.3,1.3,1);-moz-transform:scale3d(1.3,1.3,1);-o-transform:scale3d(1.3,1.3,1);transform:scale3d(1.3,1.3,1);-ms-transform:scale3d(1.3,1.3,1);-ms-box-shadow:0 0 10px #666;-o-box-shadow:0 0 10px #666}
.thumbanils-touch .thumb-hover{-webkit-transform:none;-moz-transform:none;-o-transform:none;transform:none;-ms-transform:none}
.thumbnails .thumb-hover span{position:absolute;bottom:-30px;left:0;z-index:2;display:block;width:100%;height:30px;color:#666;font:700 15px arial;line-height:30px;cursor:default}
.thumbnails img{float:left}
.exit-message{position:absolute;top:10px;left:0;z-index:10000;width:100%;height:40px}
.exit-message>div{margin:auto;width:140px;height:30px;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;background:rgba(0,0,0,.5);color:#fff;text-align:center;font:12px arial;line-height:30px;-ms-border-radius:10px;-o-border-radius:10px}
.zoom-icon{position:absolute;top:10px;right:10px;z-index:1000;width:22px;height:22px;background-image:url({$CssDir/}images/zoom-icons.png);background-size:88px 22px}
.zoom-icon-in{background-position:0 0;cursor:pointer}
.zoom-icon-in.zoom-icon-in-hover{background-position:-22px 0;cursor:pointer}
.zoom-icon-out{background-position:-44px 0}
.zoom-icon-out.zoom-icon-out-hover{background-position:-66px 0;cursor:pointer}
.bottom{position:absolute;bottom:0;left:0;width:100%}

</style>
</head>
<body>
<div id="canvas">

<div class="zoom-icon zoom-icon-in"></div>

<div class="magazine-viewport">
	<div class="container">
		<div class="magazine">
			<!-- Next button -->
			<div ignore="1" class="next-button"></div>
			<!-- Previous button -->
			<div ignore="1" class="previous-button"></div>
		</div>
	</div>
</div>

<!-- Thumbnails -->
<div class="thumbnails">
<div>
<ul></ul>
<div>	
</div>
</div>
</div>

</div>

</body>
</html>
<script type="text/javascript" src="/JS/jquery-1.11.1.min.js" ></script>
<script type="text/javascript" src="{$CssDir/}js/modernizr.2.5.3.min.js"></script>
<script>
(function() {
	'use strict';
	var hashes = {},
		regexp = {},
		history = [],
		freq = 100,
		num = 0,
		pushState = false,
		timer = null,
		currentUrl = null,
		freeze = function(obj) {
			if (Object.freeze) return Object.freeze(obj);
			return obj
		},
		getHashParts = function() {
			return window.location.href.split('#')
		},
		startTimer = function() {
			if (!timer) timer = setInterval(function() {
				if (num > 0 && currentUrl != window.location.href) {
					currentUrl = window.location.href;
					window.Hash.check()
				}
			}, freq)
		},
		stopTimer = function() {
			if (timer) {
				clearInterval(timer);
				timer = null
			}
		};
	window.Hash = freeze({
		pushState: function(yes) {
			if (window.history && window.history.pushState) pushState = yes;
			return this
		},
		fragment: function() {
			var hash = getHashParts();
			return (pushState) ? window.location.pathname + ((hash[1]) ? '#' + hash[1] : '') : hash[1] || ''
		},
		get: function(path, params) {
			var p, fragment = '',
				parameters = [];
			for (p in params) {
				if (!Object.prototype.hasOwnProperty(p)) continue;
				parameters.push(encodeURIComponent(p) + '=' + encodeURIComponent(params[p]))
			}
			if (parameters.length > 0) parameters = '?' + parameters.join('&');
			return (pushState) ? path + parameters : getHashParts()[0] + '#' + path + parameters
		},
		go: function(hash, params) {
			if (this.fragment() != hash) {
				var to = this.get(hash, params);
				if (pushState) window.history.pushState(null, document.title, to);
				else window.location.href = to
			}
			return this
		},
		update: function() {
			currentUrl = window.location.href;
			return this
		},
		on: function(hash, callback, title) {
			if (!hashes[hash]) hashes[hash] = {
				title: title,
				listeners: []
			};
			hashes[hash].listeners.push(callback);
			num++;
			startTimer();
			return this
		},
		check: function() {
			var i, hash, parts, fragment = this.fragment();
			for (hash in hashes) {
				if (!Object.prototype.hasOwnProperty.call(hashes, hash)) continue;
				hashes[hash].regexp = hashes[hash].regexp || new RegExp(hash);
				if ((parts = hashes[hash].regexp.exec(fragment))) {
					if (hashes[hash].title) document.title = hashes[hash].title;
					for (i = 0; i < hashes[hash].listeners.length; i++) if (hashes[hash].listeners[i].yep) hashes[hash].listeners[i].yep(fragment, parts)
				} else {
					for (i = 0; i < hashes[hash].listeners.length; i++) if (hashes[hash].listeners[i].nop) hashes[hash].listeners[i].nop(fragment)
				}
			}
			return this
		}
	})
})();
var pics='{SField sid="图库模型数据源标签" FD="PhotoUrl" page="0"/}';
if(pics!=""){
	pics=JSON.parse(pics);
	var str="";
	for(var i=0;i<pics.length;i++){
		if(i==0||i==(pics.length-1)){
			str+='<li class="i"><img src="{$UploadDir/}'+pics[i].url+'" alt="'+pics[i].desc+'" width="76" height="100" class="page-'+(i+1)+'" /><span>'+(i+1)+'</span></li>';
		}
		else if(i%2!=0){
			if(i<(pics.length-1)){
				str+='<li class="d"><img src="{$UploadDir/}'+pics[i].url+'" alt="'+pics[i].desc+'" width="76" height="100" class="page-'+(i+1)+'" /><img src="{$UploadDir/}'+pics[i+1].url+'" alt="'+pics[i+1].desc+'" width="76" height="100" class="page-'+(i+2)+'" /><span>'+(i+1)+'-'+(i+2)+'</span></li>';
			}
			else{
				str+='<li class="i"><img src="{$UploadDir/}'+pics[i].url+'" alt="'+pics[i].desc+'" width="76" height="100" class="page-'+(i+1)+'" /><span>'+(i+1)+'</span></li>';
			}	
		}
	}
	$(".thumbnails ul").html(str);
	yepnope({
		test: Modernizr.csstransforms,
		yep: ['{$CssDir/}js/turn.min.js'],
		nope: ['{$CssDir/}js/turn.html4.min.js'],
		both: ['{$CssDir/}js/zoom.min.js', '{$CssDir/}js/magazine.js'],
		complete: loadApp
	});
}
function loadApp() {
	$('#canvas').fadeIn(1000);
	var flipbook = $('.magazine');
	if (flipbook.width() == 0 || flipbook.height() == 0) {
		setTimeout(loadApp, 10);
		return
	}
	flipbook.turn({
		width: 922,
		height: 600,
		duration: 1000,
		acceleration: !isChrome(),
		gradients: true,
		autoCenter: true,
		elevation: 50,
		pages: pics.length,
		when: {
			turning: function(event, page, view) {
				var book = $(this),
					currentPage = book.turn('page'),
					pages = book.turn('pages');
				Hash.go('page/' + page).update();
				disableControls(page);
				$('.thumbnails .page-' + currentPage).parent().removeClass('current');
				$('.thumbnails .page-' + page).parent().addClass('current')
			},
			turned: function(event, page, view) {
				disableControls(page);
				$(this).turn('center');
				if (page == 1) {
					$(this).turn('peel', 'br')
				}
			},
			missing: function(event, pages) {
				for (var i = 0; i < pages.length; i++) addPage(pages[i], $(this))
			}
		}
	});
	$('.magazine-viewport').zoom({
		flipbook: $('.magazine'),
		max: function() {
			return largeMagazineWidth() / $('.magazine').width()
		},
		when: {
			swipeLeft: function() {
				$(this).zoom('flipbook').turn('next')
			},
			swipeRight: function() {
				$(this).zoom('flipbook').turn('previous')
			},
			resize: function(event, scale, page, pageElement) {
				if (scale == 1) loadSmallPage(page, pageElement);
				else loadLargePage(page, pageElement)
			},
			zoomIn: function() {
				$('.thumbnails').hide();
				$('.made').hide();
				$('.magazine').removeClass('animated').addClass('zoom-in');
				$('.zoom-icon').removeClass('zoom-icon-in').addClass('zoom-icon-out');
				if (!window.escTip && !$.isTouch) {
					escTip = true;
					$('<div />', {
						'class': 'exit-message'
					}).html('<div>Press ESC to exit</div>').appendTo($('body')).delay(2000).animate({
						opacity: 0
					}, 500, function() {
						$(this).remove()
					})
				}
			},
			zoomOut: function() {
				$('.exit-message').hide();
				$('.thumbnails').fadeIn();
				$('.made').fadeIn();
				$('.zoom-icon').removeClass('zoom-icon-out').addClass('zoom-icon-in');
				setTimeout(function() {
					$('.magazine').addClass('animated').removeClass('zoom-in');
					resizeViewport()
				}, 0)
			}
		}
	});
	if ($.isTouch) $('.magazine-viewport').bind('zoom.doubleTap', zoomTo);
	else $('.magazine-viewport').bind('zoom.tap', zoomTo);
	$(document).keydown(function(e) {
		var previous = 37,
			next = 39,
			esc = 27;
		switch (e.keyCode) {
		case previous:
			$('.magazine').turn('previous');
			e.preventDefault();
			break;
		case next:
			$('.magazine').turn('next');
			e.preventDefault();
			break;
		case esc:
			$('.magazine-viewport').zoom('zoomOut');
			e.preventDefault();
			break
		}
	});
	Hash.on('^page\/([0-9]*)$', {
		yep: function(path, parts) {
			var page = parts[1];
			if (page !== undefined) {
				if ($('.magazine').turn('is')) $('.magazine').turn('page', page)
			}
		},
		nop: function(path) {
			if ($('.magazine').turn('is')) $('.magazine').turn('page', 1)
		}
	});
	$(window).resize(function() {
		resizeViewport()
	}).bind('orientationchange', function() {
		resizeViewport()
	});
	$('.thumbnails').click(function(event) {
		var page;
		if (event.target && (page = /page-([0-9]+)/.exec($(event.target).attr('class')))) {
			$('.magazine').turn('page', page[1])
		}
	});
	$('.thumbnails li').bind($.mouseEvents.over, function() {
		$(this).addClass('thumb-hover')
	}).bind($.mouseEvents.out, function() {
		$(this).removeClass('thumb-hover')
	});
	if ($.isTouch) {
		$('.thumbnails').addClass('thumbanils-touch').bind($.mouseEvents.move, function(event) {
			event.preventDefault()
		})
	} else {
		$('.thumbnails ul').mouseover(function() {
			$('.thumbnails').addClass('thumbnails-hover')
		}).mousedown(function() {
			return false
		}).mouseout(function() {
			$('.thumbnails').removeClass('thumbnails-hover')
		})
	}
	if ($.isTouch) {
		$('.magazine').bind('touchstart', regionClick)
	} else {
		$('.magazine').click(regionClick)
	}
	$('.next-button').bind($.mouseEvents.over, function() {
		$(this).addClass('next-button-hover')
	}).bind($.mouseEvents.out, function() {
		$(this).removeClass('next-button-hover')
	}).bind($.mouseEvents.down, function() {
		$(this).addClass('next-button-down')
	}).bind($.mouseEvents.up, function() {
		$(this).removeClass('next-button-down')
	}).click(function() {
		$('.magazine').turn('next')
	});
	$('.previous-button').bind($.mouseEvents.over, function() {
		$(this).addClass('previous-button-hover')
	}).bind($.mouseEvents.out, function() {
		$(this).removeClass('previous-button-hover')
	}).bind($.mouseEvents.down, function() {
		$(this).addClass('previous-button-down')
	}).bind($.mouseEvents.up, function() {
		$(this).removeClass('previous-button-down')
	}).click(function() {
		$('.magazine').turn('previous')
	});
	resizeViewport();
	$('.magazine').addClass('animated')
}
$('.zoom-icon').bind('mouseover', function() {
	if ($(this).hasClass('zoom-icon-in')) $(this).addClass('zoom-icon-in-hover');
	if ($(this).hasClass('zoom-icon-out')) $(this).addClass('zoom-icon-out-hover')
}).bind('mouseout', function() {
	if ($(this).hasClass('zoom-icon-in')) $(this).removeClass('zoom-icon-in-hover');
	if ($(this).hasClass('zoom-icon-out')) $(this).removeClass('zoom-icon-out-hover')
}).bind('click', function() {
	if ($(this).hasClass('zoom-icon-in')) $('.magazine-viewport').zoom('zoomIn');
	else if ($(this).hasClass('zoom-icon-out')) $('.magazine-viewport').zoom('zoomOut')
});
$('#canvas').hide();
</script>